<template>
  <div class="app">
    <h2 ref="title" class="title" :style="{ color: titleColor }">{{ message }}</h2>
    <button ref="btn" @click="getRefValue">get ref value</button>

    <ref-cpns ref="refCpns"></ref-cpns>
  </div>
</template>

<script setup>
  import { ref } from "vue"
  import RefCpns from "./components/RefCpns.vue"
  
  const message = ref("hello world")
  const titleColor = ref("red")
  const title = ref(null)
  const btn = ref(null)
  const refCpns = ref(null)

  const getRefValue = () => {
    // 1.获取h2/button元素
    console.log(title.value)
    console.log(btn.value)
    console.log(refCpns.value);
    
    refCpns.value.handleClick()

    // 2.修改样式
    // title.value.style.color = "blue"
    // btn.value.style.backgroundColor = "orange"

    // 3.修改内容
    title.value.innerHTML = "hello ref dom"
    btn.value.innerHTML = "点我一下"

    // 4.修改属性
    // title.value.setAttribute("data-id", 100)
    // btn.value.setAttribute("data-id", 200)

    // 5.修改类名
    // title.value.classList.add("active")//     btn.value.classList.add("active")
  }

</script>

<style lang="scss" scoped></style>
